<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="48">
        <template v-if="type == 1">
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="原因">
              <a-input v-model="queryParam.whyName" placeholder=" 请输入原因" allowClear />
            </a-form-item>
          </a-col>
          
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="适用场景">
              <a-select v-model="queryParam.type" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.id + ''" v-for="item in whyTypeList" :key="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="启用状态">
              <a-select v-model="queryParam.status" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">启用</a-select-option>
                <a-select-option value="1">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24" v-if="type == 2">
          <a-form-item label="类目名称">
            <a-input v-model="queryParam.categoryName" placeholder=" 请输入类目名称" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button type="primary" icon="plus" style="margin-left: 8px" @click="handleAdd">新增</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { whyTypeList } from '../components/whyTypeList.js'
export default {
  props: {
    type: {
      // 1:审核相关配置 2:社区类目管理 
      type: [String, Number],
      default: 1
    }
  },
  data() {
    return {
      whyTypeList,
      memberType: 1,
      queryParam: {
        type: '1',
        status: ''
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 消息类型管理
    handleMessageTypeList() {
      this.$router.push(`/micromall/community/marketingManagement/messageTypeList`)
    },

    // 新增
    handleAdd() {
      this.$emit('onAdd', {})
    },

    // 新增消息类型
    handleAddMessageType() {
      this.$emit('onAddMessageType', null)
    },

    memberTypeChange(e) {
      this.$emit('onMemberTypeChange', e.target.value)
    },

    // 新增广告
    handleAddAd() {
      this.$emit('onAddAd', null)
    },

    // 新增广告
    handleAddMessage() {
      this.$emit('onAddMessage', null)
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        type: '1',
        status: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            console.log('time')
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
